<template style="width: 100%">
    <div>
        <el-tabs v-model="activeName" @tab-click="handleClick" style="width: 100%  ">
            <el-tab-pane label="数据空间" name="first" style="margin-left: 10%">
                <div style="margin-top: 3%">
                    <el-button @click="upload" icon="el-icon-upload2" type="primary">上传</el-button>
                    <el-button @click="newFolder" icon="el-icon-folder-add" type="primary">新建文件夹</el-button>
                    <el-button type="text" @click="backUp">返回上一级 | {{currentPath}}</el-button>
                    <el-table :data="tableData" style="margin-top: 2%;width: 87%;margin-left: 1%">
                        <el-table-column
                                prop="Type"
                                width="70"
                                align="center ">
                            <template slot-scope="scope">
                                <div @click="toNextLevel(scope.$index,scope.row)">
                                    <el-button style="border: 0"
                                               v-show="scope.row.Type=='Directory'"
                                               class="fa fa-folder fa-2x"></el-button>
                                    <el-button style="border: 0;margin-left: 0"
                                               v-show="scope.row.Type=='File'" class="fa fa-file fa-2x"></el-button>
                                </div>
                            </template>
                        </el-table-column>
                        <el-table-column
                                class="fileName"
                                prop="Name"
                                label="文件名"
                                width="380">
                            <template slot-scope="scope">
                                <el-button @click="toNextLevel(scope.$index,scope.row)"
                                           style="border: 0;padding-left: 0">
                                    {{scope.row.Name}}
                                </el-button>
                                <!--<el-input style="width: 200px" size="small"></el-input>-->
                            </template>
                        </el-table-column>
                        <el-table-column width="fit-content" align="center " label="操作">
                            <template slot-scope="scope">
                                <el-button
                                        v-if="scope.row.Type !=='Directory'"
                                        :disabled="scope.row.Name.indexOf('.shp')==-1 &&scope.row.Name.indexOf('.csv')==-1 && scope.row.Name.indexOf('.')!==-1 && scope.row.Name.indexOf('.txt')==-1 || scope.row.Name.indexOf('_S')!==-1"
                                        title="预览"
                                        icon="fa fa-table"
                                        @click="previewFile(scope.$index,scope.row)"
                                        type="text">
                                    <!--<i class="el-icon-delete-solid"></i>-->
                                </el-button>
                                <el-button
                                        v-if="scope.row.Type !=='Directory'"
                                        :disabled="scope.row.Name.indexOf('.csv')==-1"
                                        title="空间化"
                                        icon="fa fa-connectdevelop"
                                        @click="spatialFile(scope.$index,scope.row)"
                                        type="text">
                                    <!--<i class="el-icon-delete-solid"></i>-->
                                </el-button>
                                <el-button
                                        :disabled="scope.row.Type=='Directory'"
                                        title="下载"
                                        icon="el-icon-download"
                                        @click="downloadFile(scope.$index,scope.row)"
                                        type="text">
                                </el-button>
                                <el-button
                                        title="删除"
                                        icon="fa fa-trash"
                                        @click="deleteFile(scope.$index,scope.row)"
                                        type="text">
                                    <!--<i class="el-icon-delete-solid"></i>-->
                                </el-button>
                                <!--<el-button-->
                                <!--title="移动"-->
                                <!--icon="el-icon-rank"-->
                                <!--@click="moveFile(scope.$index,scope.row)"-->
                                <!--type="text">-->
                                <!--</el-button>-->
                                <!--<el-button-->
                                <!--title="重命名"-->
                                <!--icon="fa fa-pencil-square-o"-->
                                <!--@click="changeName(scope.$index,scope.row)"-->
                                <!--type="text">-->
                                <!--</el-button>-->
                            </template>
                        </el-table-column>
                        <el-table-column
                                prop="Size"
                                label="文件大小"
                                width="200"
                                align="center">
                        </el-table-column>
                        <el-table-column
                                prop="Date"
                                label="日期"
                                align="center"
                                width="150">
                        </el-table-column>
                    </el-table>
                </div>
            </el-tab-pane>
            <el-tab-pane label="个人数据集" name="second">
                <div style="margin-top: 3%">
                    <el-table :data="loaderTableData" style="width:79%;margin-left: 10%">
                        <el-table-column
                                prop="datasetname"
                                label="数据集名称"
                                width="400"
                        >
                        </el-table-column>
                        <el-table-column
                                prop="successnumb"
                                label="已录入条数"
                                width="300"
                                align="center"
                        >
                        </el-table-column>
                        <el-table-column
                                prop="status"
                                label="状态"
                                width="100"
                        >
                        </el-table-column>
                        <el-table-column width="fit-content" align="center " label="操作">
                            <template slot-scope="scope">
                                <el-button
                                        prop=""
                                        :disabled="scope.row.preDisabled"
                                        title="预览"
                                        icon="fa fa-table"
                                        @click="previewDataset(scope.$index,scope.row)"
                                        type="text">
                                    <!--<i class="el-icon-delete-solid"></i>-->
                                </el-button>
                                <el-button
                                        :disabled="scope.row.logDisabled"
                                        title="日志"
                                        icon="el-icon-s-order"
                                        @click="showDatasetLog(scope.$index,scope.row)"
                                        type="text">
                                </el-button>
                            </template>
                        </el-table-column>
                    </el-table>
                </div>
            </el-tab-pane>
            <el-tab-pane label="个人服务" name="third">
                <div style="margin-top: 3%"></div>
            </el-tab-pane>
        </el-tabs>

        <upload-data-dialog @refreshCurrentTable="refresh"></upload-data-dialog>
        <new-folder-dialog v-bind:currentPath="currentPath" @refreshCurrentTable="refresh"></new-folder-dialog>
        <data-preview-dialog></data-preview-dialog>
        <spatial-dialog>v-bind:loaderTableData="loaderTableData"</spatial-dialog>
        <logDialog ></logDialog>
    </div>
</template>
<script>
    import uploadDataDialog from "./uploadDataDialog.vue"
    import newFolderDialog from "./newFolderDialog.vue"
    import dataPreviewDialog from "./dataPreviewDialog.vue"
    import spatialDialog from "./spatiaDialog.vue"
    import logDialog from '../space/logDialog'

    export default {
        components: {
            uploadDataDialog,
            newFolderDialog,
            dataPreviewDialog,
            spatialDialog,
            logDialog,
        },
        data() {
            return {
                activeName: 'first',
                tableData: [],
                currentPath: '',
                loaderTableData: [],
                logger: []
                // spatialVisible: false
            };
        },
        methods: {
            handleClick(tab, event) {
                if (this.activeName === 'second') {
                    this.getDataset();
                }
                console.log(tab, event);
            },
            spatialFile(index, row) {
                let that = this;
                this.$Bus.$emit('spatialVisible', {
                    // url: "",
                    path: that.currentPath + "/" + row.Name,
                    visible: true,
                })
            },

            previewFile(index, row) {
                let that = this;
                this.$Bus.$emit('dataPreviewDialogParams', {
                    title: row.Name,
                    visible: true,
                    queryUrl: "userself/preview?path=" + that.currentPath + "/" + row.Name,
                    queryParams: null
                })
            },
            downloadFile(index, row) {
                let path = this.currentPath + "/" + row.Name;
                let url = "http://localhost:9000/dbfg/userself/download?path=";
                window.open(url + path, 'blank');
            },
            deleteFile(index, row) {
                let that = this;
                let filePath = this.currentPath + "/" + row.Name;
                this.$confirm('是否删除该文件？', '提示', {
                    confirmButtonText: '确定',
                    cancelButtonText: '取消',
                    type: 'warning'
                }).then(() => {
                    let url = "http://localhost:9000/dbfg/userself/delete?path=";
                    axios.get(url + filePath)
                        .then(function (res) {
                            if (res.data.code == 200) {
                                that.$message({
                                    message: '文件删除成功',
                                    type: 'success'
                                });
                                that.tableData = [];
                                that.refresh();
                            } else {
                                that.$message({
                                    message: '文件删除失败',
                                    type: 'warning'
                                });
                            }
                        }).catch(function (error) {
                        console.log(error)
                    })
                }).catch(() => {
                    this.$message({
                        type: 'info',
                        message: '已取消删除'
                    });
                });
            },
            backUp() {
                let that = this;
                let index = this.currentPath.lastIndexOf("\/");
                this.currentPath = this.currentPath.substring(0, index);
                let url = "http://localhost:9000/dbfg/userself/all?path=";
                axios.get(url + this.currentPath)
                    .then(function (res) {
                        if (res.data.code == 200) {
                            that.tableData = [];
                            that.tableData = res.data.body;
                        } else {
                            that.$message({
                                message: '数据获取失败',
                                type: 'warning'
                            });
                        }
                    });
            },
            upload() {
                let uploadDialogVisible = {
                    visible: true,
                };
                this.$Bus.$emit("uploadDialogVisible", uploadDialogVisible);
            },
            newFolder() {
                let newFolderDialogVisible = {
                    visible: true,
                    path: this.currentPath
                };
                this.$Bus.$emit('newFolderDialogVisible', newFolderDialogVisible);
            },
            getFile() {
                let that = this;
                let url = "http://localhost:9000/dbfg/userself/all?path=";
                let path = "/";
                axios.get(url + path)
                    .then(function (res) {
                        if (res.data.code == 200) {
                            that.tableData = res.data.body;
                        } else {
                            that.$message({
                                message: '数据获取失败',
                                type: 'warning'
                            });
                        }
                    });
            },

            toNextLevel(index, row) {
                if (row.Type == "File") {

                } else {
                    let that = this;
                    this.currentPath += "/" + row.Name;
                    let url = "http://localhost:9000/dbfg/userself/all?path=";
                    axios.get(url + this.currentPath)
                        .then(function (res) {
                            if (res.data.code == 200) {
                                that.tableData = [];
                                that.tableData = res.data.body;
                            } else {
                                that.$message({
                                    message: '数据获取失败',
                                    type: 'warning'
                                });
                            }
                        });
                }
            },
            refresh() {
                let that = this;
                let url = "http://localhost:9000/dbfg/userself/all?path=";
                axios.get(url + this.currentPath)
                    .then(function (res) {
                        console.log(res);
                        if (res.data.code == 200) {
                            that.tableData = [];
                            that.tableData = res.data.body;
                        }
                    })
            },
            getDataset() {
                let that = this;
                let url = "http://localhost:9000/dbfg/personalDataset/get";
                axios.get(url)
                    .then(function (res) {
                        if (res.data.code == 200) {
                            that.loaderTableData = res.data.body;
                            that.checkData(res.data.body);
                        } else {
                            that.$message({
                                message: '数据获取失败',
                                type: 'warning'
                            });
                        }
                    });
                console.log("fn()函数被执行了");
            },
            checkData(data) {
                // ToDo 设置时间，超过五分钟停止请求
                let that = this;
                for (let row of data) {
                    if (row.status == "Finish") {
                        row.preDisabled = false;
                        row.logDisabled = false;
                    } else {
                        row.preDisabled = true;
                        row.logDisabled = true;
                        let superviseTimer = setInterval(function () {
                            let url = "http://localhost:9000/dbfg/personalDataset/getByName?name=" + row.datasetname;
                            axios.get(url)
                                .then(function (res) {
                                    if (res.data.code == 200) {
                                        //刷新那一行的值
                                        if (res.status == "Finish") {
                                            clearInterval(superviseTimer);
                                            row.preDisabled = false;
                                            row.logDisabled = false;
                                        }
                                    }else{
                                        clearInterval(superviseTimer);
                                        that.$message({
                                            type: 'warning',
                                            message: '未获取数据！'
                                        });
                                    }
                                });
                        }, 5000);
                    }
                }
            },
            previewDataset(index, row) {
                let that = this;

            }
            ,
            showDatasetLog(index, row) {
                let that = this;
                let url = "http://localhost:9000/dbfg/personalDataset/getlogByName?name=" + row.datasetname;
                axios.get(url)
                    .then(function (res) {
                        if (res.data.code === 200) {
                            if (res.data.body == null) {
                                res.data.body = '没有错误'
                            }
                            // ToDo 创建一个日志的dialog，放日志
                                that.$alert(res.data.body, '错误日志', {
                                confirmButtonText: '确定'
                            });
                        } else {
                            that.$message({
                                message: '数据获取失败',
                                type: 'warning'
                            });
                        }
                    });
            }
        }
        ,
        created() {
            this.getFile();
            this.getDataset();
        }
    }
    ;
</script>

<style>

</style>
